import Vue from 'vue';
import { enter, leave } from '../node_modules/element-ui/src/transitions/collapse-transition';

Vue.directive('hide', {
  bind(el, binding, vnode) {
    // 定位el对应的vnode--导入相应模块？
    // vnode = locateNode(vnode);
    // 获取vnode上绑定的transition变化
    const transition = vnode.data && vnode.data.transition;
    const originalDisplay = el.__vOriginalDisplay =
      el.style.display === 'none' ? '' : el.style.display;
    // 如果绑定了v-hide指令的元素外层套了一层 transition 的话，则进入该分支
    if (binding.value && transition) {
      vnode.data.hide = true;
      enter(vnode, () => {
        el.style.display = 'none';
      });
    } else {
      el.style.display = binding.value ? 'none' : originalDisplay;
    }
  },
  update(el, binding, vnode, oldVNode) {
    // 如果 v-show 后面表达式的新值和旧值一样的话，则不需要进行任何处理，直接 return 即可
    if (binding.value === oldVNode.value) return;
    // vnode = locateNode(vnode);
    const transition = vnode.data && vnode.data.transition;
    if (transition) {
      vnode.data.show = true;
      if (binding.value) {
        enter(vnode, () => {
          el.style.display = 'none';
        });
      } else {
        leave(vnode, () => {
          el.style.display = el.__vOriginalDisplay;
        });
      }
    }
    el.style.display = binding.value ? 'none' : el.__vOriginalDisplay;
  },
  unbind(el, isDestroy) {
    if (!isDestroy) {
      // 如果当前的元素没有被销毁的话，则将 el.style.display 设置为 style.display 初始值。
      el.style.display = el.__vOriginalDisplay;
    }
    // 如果当前元素已经被销毁了的话，就不用做任何操作
  }
}
);
